<template>
  <div class="view-product">
    <van-nav-bar title="用户查证产品信息" />

    <!-- 商品ID输入框 -->
    <div class="container">
      <div class="product-form">
        <van-field v-model="productId" label="产品ID" placeholder="请输入产品ID" />
        <van-button type="primary" @click="getProductInfo">获取产品信息</van-button>

        <!-- 显示商品信息 -->
        <div v-if="productInfo">
          <van-cell-group>
            <van-cell title="产品ID" :value="productId" />
            <van-cell title="产品名" :value="productInfo.name" />
            <van-cell title="产品描述" :value="productInfo.description" />
            <van-cell title="产品价格(元)" :value="productInfo.price" />
            <van-cell title="生产者地址" :value="productInfo.producer" />
          </van-cell-group>
        </div>

        <!-- 如果查询未找到商品 -->
        <div v-if="errorMessage">
          <p>{{ errorMessage }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import useWeb3 from '../util';

export default {
  name: 'ViewProduct',
  data() {
    return {
      productId: '',       // 商品ID
      productInfo: null,   // 商品信息
      errorMessage: ''     // 错误信息
    };
  },
  async mounted() {
    const { getAccount } = useWeb3();
    try {
      // 获取当前用户账户
      this.account = await getAccount();
    } catch (error) {
      console.error(error);
    }
  },
  methods: {
    async getProductInfo() {
      const { ballotSm } = useWeb3();
      try {
        // 调用智能合约获取产品信息
        const result = await ballotSm.methods.getProduct(this.productId).call();

        // 调试输出获取的数据，确保数据格式正确
        console.log(result);

        // 判断返回的数据是否有效（例如：name 为 empty 或 description 为 empty）
        if (!result || result.length < 5 || !result[4]) {
          console.log("error")
        } else {
          // 清空错误消息
          this.errorMessage = '';

          // 确保返回的数据类型正确
          this.productInfo = {
            name: result[0] ? String(result[0]) : '',  // 转换为字符串，防止空值或对象
            description: result[1] ? String(result[1]) : '',  // 转换为字符串
            price: result[2] ? Number(result[2]) : 0,  // 转换为数字
            producer: result[3] ? String(result[3]) : ''  // 转换为字符串
          };
        }
      } catch (error) {
        console.error(error);
        this.productInfo = null;  // 设置为 null 表示未找到产品
        this.errorMessage = "未找到此ID的产品或该产品未注册";  // 设置错误消息
      }
    }
  }
};
</script>

<style scoped>
/* 设置全局的 body 和 html 样式 */
body, html {
  margin: 0;
  height: 100%;
}

/* .container 使用 flexbox 居中 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;  /* 使容器占满整个视口 */
}

/* .product-form 设置最大宽度，保证在大屏幕时不超过一定宽度 */
.product-form {
  padding: 20px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 给容器加阴影 */
  border-radius: 8px;
  width: 100%;  /* 让它自适应小屏幕 */
  max-width: 720px;  /* 限制最大宽度 */
}

/* 输入栏之间添加间距 */
.product-form .van-field {
  margin-bottom: 15px; /* 输入框之间的间距 */
}

/* 显示错误信息的样式 */
p {
  color: red;
  font-size: 14px;
}
</style>
